<template>
  <div>
    <!-- 文档开始 -->
    <!-- 新闻标题头部 -->
    <mt-header fixed class="header">
      <router-link to="/home/goods" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button slot="right" @click="bianjishanchu">编辑</mt-button>
    </mt-header>

    <!-- 购物车列表 -->
    <div class="shopcar_list">
      <div
        class="shopcar_card_box"
        v-for="(item,index) in carlist"
        :key="index"
        :class="showborder ? 'border' : ''"
      >
        <div class="shopcar_card">
          <div class="shopcar_card_check">
            <mt-switch v-model="item.selected" v-if="showSwitch"></mt-switch>
            <mt-switch v-model="item.selected" v-else></mt-switch>
          </div>
          <div class="shopcar_card_img">
            <img :src="item.goods_pic">
          </div>
          <div class="shopcar_card_text">
            <dl>
              <dt>{{item.goods_name}}</dt>
              <dd>
                <span>{{item.goods_zhonglei.chima}}</span>
                <span>{{item.goods_zhonglei.zhonglei}}</span>
              </dd>
              <dd>
                <a>{{item.goods_jiage}}</a>
                <span>
                  <carnum
                    :initcount="$store.getters.getcount[item.goods_name]"
                    :name="item.goods_name"
                  ></carnum>
                </span>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>

    <!-- 结算或者删除商品底部弹出 -->
    <div class="salecard">
      <div class="mui-card">
        <div class="mui-card-content">
            <p><span><mt-switch></mt-switch></span>全选</p>
           <a v-if="delbtn">
             合计：￥<span>0</span>
              <div class="gongji">
                结算(0)
              </div>
           </a>
           <div class="gongji" v-else>
                删除(0)
            </div>
        </div>
      </div>
    </div>

    <!-- 文档结束 -->
  </div>
</template>
<script>
import carnum from "./shopcarnumber";

export default {
  data() {
    return {
      carlist: JSON.parse(localStorage.getItem("car") || "[]"),
      showSwitch: true, //展示则选择结算商品  不展示则显示选择删除商品按钮
      showborder: false,//是否展示删除商品边框
      delbtn:true,//是否展示删除按钮
    };
  },
  methods: {
    bianjishanchu: function() {
      //点击触发  编辑是否删除商品
      this.showSwitch = !this.showSwitch;
      this.showborder = !this.showborder;
       this.delbtn = !this.delbtn;
    }
  },
  mounted() {},
  components: {
    carnum
  }
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
